<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wp {
            display: grid;
            /* 第一个参数表示重复次数，第二个表示对应的宽度 */
            /* 如果容器大小不固定但是单元格大小固定则第一个参数可以使用auto-fill */
            grid-template-columns: repeat(3, 33.33%);
            grid-template-rows: repeat(3, 33.33%);
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <!-- 
        display常见的属性：（默认属性对于块级元素来说为block对于行内元素来说为inline）
        1、block：将元素渲染为块级元素，对span这类元素依旧有作用
        2、inline：将元素渲染为内联元素，使得具有行内元素的特点
        3、none：将元素从页面移除，不会占据空间
        4、inline-block：渲染成内联块元素，兼具块级和行内元素的特性
        5、flex：弹性盒子
        6、grid：将盒子渲染为网格容器
        7、table-cell：显示为表格单元格
     -->
     <!-- grid布局如下所示 -->
     <!-- 
        fr：为了方便的表示比例关系，grid布局提供了gr关键字，如果两列的宽度分别为1fr 2fr表示后者是前者的两倍
        minmax：grid-template-columns：minmax(100px, 1fr)表示列宽不小于100px不大于1fr
        grid-row-gap/grid-column-gap：分别表示行间距和列间距
        grid-gap：[row-gap] [column-gap]，相当于flex中的flex-flow一样：第一个表示行间距 第二个表示列间
        grid-auto-flow：定义容器繁方式顺序，默认为先行后列。grid-auto-flow: column;（这个是先列后行）
      -->
     <div class="wp">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
     </div>
</body>
</html>